// 创建优惠劵信息
var systemDate = [
  {
    id: 1,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 2,
    caption: "系统升级通知",
    name: "admin kiki",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 3,
    caption: "系统升级通知",
    name: "admin ll",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 4,
    caption: "系统升级通知",
    name: "admin zhang",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 5,
    caption: "系统升级通知",
    name: "admin liu",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 6,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 7,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 8,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-08-09 21:00:00",
  },
  {
    id: 9,
    caption: "用户板块升级通知",
    name: "admin",
    time: "2022-09-09 21:00:00",
  },
  {
    id: 10,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-07-19 21:00:00",
  },
  {
    id: 11,
    caption: "系统升级通知",
    name: "admin",
    time: "2022-09-09 21:00:00",
  },
  {
    id: 12,
    caption: "有新活动了",
    name: "admin",
    time: "2022-07-09 21:00:00",
  },
  {
    id: 13,
    caption: "新活动通知",
    name: "admin",
    time: "2022-10-09 21:00:00",
  },
];

// 根据优惠劵的数据渲染页面

//当前的页码
var page = 1;
//每页的条数
var count = 5;
//获取tbody
var systemTBody = document.querySelector(".system-tbody");
//获取分页容器
var systemPagination = document.querySelector(".system-pagination");
//获取向左的按钮
var systemGoLeft = document.querySelector(".system-goLeft");
//获取向右的按钮
var systemGoRight = document.querySelector(".system-goRight");

//获取搜索的输入框
var systemEnter = document.querySelector(".system-enter");
var systemFiltrate2 = document.querySelector(".system-filtrate-two");
var systemFiltrate3 = document.querySelector(".system-filtrate-three");

var searchData2;
// 数据渲染
/* 
当没有搜索内容时：
  一页渲染5条数据  即就是一次只遍历5个数据   
  在第一页  是从  0-4   
当有筛选内容时：
  按照筛选内容渲染
*/
// 数据渲染   优惠劵的展示   经过筛选后的展示    页码
function systemRender() {
  //查看搜索框的内容 条件
  var str1 = systemEnter.value; //搜索的内容1
  var str2 = systemFiltrate2.value; //搜索的内容2
  var str3 = systemFiltrate3.value; //搜索的内容3
  searchData2 = []; //最终用来渲染的;
  var data1 = []; //第一个筛选框筛选后的数据
  var data2 = []; //第二个筛选框筛选后的数据
  // 判断第一个筛选框   第一个筛选框可以筛选  caption
  if (str1.trim() == "") {
    // 第一个筛选框没有内容
    data1 = systemDate;
  } else {
    // filter会把systemDate中每一个数据作为参数给函数  并将符合条件的数组返回
    data1 = systemDate.filter(function (v) {
      if (v.caption.includes(str1)) {
        return v;
      }
    });
  }

  // 第二个、   name
  if (str2.trim() == "") {
    data2 = data1;
  } else {
    data2 = data1.filter(function (v) {
      if (v.name.includes(str2)) {
        console.log(13);

        return v;
      }
    });
  }
  // 第三个   筛选出日期
  if (str3.trim() == "") {
    searchData2 = data2;
  } else {
    searchData2 = data2.filter(function (v) {
      if (v.time > str3) {
        console.log(14);
        return v;
      }
    });
  }

  // 将筛选出来的数距 添加都页面
  //让table为空

  systemTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData2.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `
     <td><input type="checkbox" name="" id=""></td>
      <td>${renderArr[i].id}</td>
     <td>${renderArr[i].caption}</td>
     <td>${renderArr[i].name}</td>
     <td>${renderArr[i].time}</td>
     <td><a class="editCoupon">编辑</a>
         <a class="deleteCoupon">删除</a>
     </td>
 `;
    //把tr创建到tbody里面
    systemTBody.appendChild(oTr);
  }

  // 渲染页码  根据数据长度渲染页码  是5的倍数 就创建一个页码
  // 先让他为空
  var systemPageBtn = document.querySelectorAll(".systemPageBtn");
  // 删除所有的页码
  for (var i = 0; i < systemPageBtn.length; i++) {
    systemPagination.removeChild(systemPageBtn[i].parentNode);
  }

  //根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData2.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="systemPageBtn">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.children[0].classList.add("activePage");
    }
    //在下一页的前面插入页码
    systemPagination.insertBefore(oLi, systemPagination.lastElementChild);
  }

  // 更改数据总数
  // 获取标签
  // 获取数据信息
  var systemDataDisplay = document.querySelector(".system-data-display");

  systemDataDisplay.innerHTML = `共${Math.ceil(searchData2.length / count)}页/${
    searchData2.length
  }条数据`;
}

// 一开始先进行一次数据渲染  让页面有东西
systemRender();
// 为分页加事件  即就是 点击页码  显示对应的内容 事件代理
systemPagination.addEventListener("click", changePage);
function changePage() {
  if (event.target.className == "systemPageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    systemRender();
  }
}

// 向左  向右翻页
systemGoLeft.addEventListener("click", leftFn);
function leftFn() {
  if (page > 1) {
    page--;
    systemRender();
  }
}
systemGoRight.addEventListener("click", rightFn);
function rightFn() {
  if (page < Math.ceil(searchData2.length / count)) {
    page++;
    systemRender();
  }
}

// 获取编辑页面
var systemEditPage = document.querySelector(".system-edit-page");
// 获取系统消息页面
var system = document.querySelector(".system");

// 编辑  事件委托添加
systemTBody.addEventListener("click", editFn);
function editFn() {
  if (event.target.className == "editCoupon") {
    console.log(34);
    console.log(systemEditPage);
    systemEditPage.style.display = "block";
  }
}

// 编辑页面的事件
// 获取取消按钮  和x
var cancelCircle = document.querySelectorAll(".cancel-circle");
cancelCircle[0].addEventListener("click", goBackFn);
cancelCircle[1].addEventListener("click", goBackFn);
function goBackFn() {
  systemEditPage.style.display = "none";
}

// 删除
systemTBody.addEventListener("click", deleteFn);
function deleteFn() {
  if (event.target.className.includes("deleteCoupon")) {
    //找到id
    var id = event.target.parentNode.parentNode.children[1].innerText;
    //循环数据对比
    for (var i = 0; i < systemDate.length; i++) {
      if (systemDate[i].id == id) {
        //删除id所对应的数据
        systemDate.splice(i, 1);
      }
    }
    //重新渲染
    systemRender();
  }
}

// 全选功能
/* 
  全选按钮选中   上面的小按钮全选中
  全选按钮取消   上面的小按钮取消
*/
// 获取全选按钮
var systemCheckAllInput = document.querySelector(".system-checkAll>input");
var systemCheckAllDiv = document.querySelector(".system-checkAll");

// 获取所有的小按钮
var systemCheckSmall = document.querySelectorAll(".system-tbody >tr>td>input");
systemCheckAllDiv.addEventListener("click", checkAllFn);
systemCheckAllInput.addEventListener("click", checkAllFn);
function checkAllFn() {
  systemCheckSmall = document.querySelectorAll(".system-tbody >tr>td>input");
  // 实现点击一次选中 在点击一次取消
  if (systemCheckAllInput.checked == false) {
    systemCheckAllInput.checked = true;
  } else {
    systemCheckAllInput.checked = false;
  }

  // 获取全选按钮的状态
  var checkState = systemCheckAllInput.checked;

  for (var i = 0; i < systemCheckSmall.length; i++) {
    systemCheckSmall[i].checked = checkState;
  }
}

// 为页面中的每一个小按钮添加点击事件
/* 
    当所有的小按钮都选中时，全选按钮选中
*/
for (var i = 0; i < systemCheckSmall.length; i++) {
  systemCheckSmall[i].addEventListener("click", checkSmallFn);
}
function checkSmallFn() {
  for (var j = 0; j < systemCheckSmall.length; j++) {
    if (systemCheckSmall[j].checked == false) {
      systemCheckAllInput.checked = false;
      return;
    }
  }
  systemCheckAllInput.checked = true;
}

// 批量删除功能
/*
    当点击了批量删除    
    将勾选了的 tr全部删除  遍历  将勾选了的input的tr另存在一个数组里
    并删除数据
 */
// 获取批量删除
var systemDeleteAll = document.querySelector(".system-deleteAll");
var deleteArr = []; //存删除的tr
var checkId = []; //存被删除的 tr 的id
systemDeleteAll.addEventListener("click", deleteAllFn);
function deleteAllFn() {
  aCheckSmall = document.querySelectorAll(".system-tbody >tr>td>input");
  for (var i = 0; i < aCheckSmall.length; i++) {
    if (aCheckSmall[i].checked == true) {
      deleteArr.push(aCheckSmall[i]);
    }
  }
  console.log(deleteArr);
  for (var j = 0; j < deleteArr.length; j++) {
    // 找到每一项的id  存在数组里
    checkId.push(deleteArr[j].parentNode.parentNode.children[1].innerText);
  }
  console.log(checkId);
  // 根据id删除对应的数据 然后进行数据渲染
  for (var i = 0; i < checkId.length; i++) {
    for (var j = 0; j < systemDate.length; j++) {
      if (checkId[i] == systemDate[j].id) {
        //删除id所对应的数据
        systemDate.splice(j, 1);
        systemCheckAllInput.checked = false;
      }
    }
  }
  //重新渲染
  systemRender();
  /* 
      清空 deleteArr = []; //存删除的tr
       checkId = []; //存被删除的 tr 的id 
  */
  deleteArr = [];
  checkId = [];
}

// 新增优惠劵功能
//获取发布消息的按钮
var systemAddCoupon = document.querySelector(".system-addCoupon");
systemAddCoupon.addEventListener("click", function () {
  systemEditPage.style.display = "block";
});

/* 筛选功能 */
// 获取筛选按钮
var systemFiltrateBtn = document.querySelector(".system-filtrateBtn");
systemFiltrateBtn.addEventListener("click", function () {
  systemRender();
});

// 当筛选框失去焦点时，重新渲染页面
systemEnter.addEventListener("blur", function () {
  systemRender();
});
systemFiltrate2.addEventListener("blur", function () {
  systemRender();
});
systemFiltrate3.addEventListener("blur", function () {
  systemRender();
});

/* 
    把用户新添加的东西  添加到数据中 
     1、获取用户输入的内容
     2、根据内容创建数据  加到数据末尾  前面不会加
     3、重新渲染页面
*/
// 获取发布按钮  输入框

var release = document.querySelector(".system-release");
var systemVal1 = document.querySelector(".circle-concent>div>input");
var systemVal2 = document.querySelector(".circle-concent>div>textarea");
release.addEventListener("click", releaseFn);
function releaseFn() {
  var st1 = systemVal1.value;
  // 不知道放哪 没什么用
  var st2 = systemVal2.value;
  // 获取当前是时间
  var oDate = new Date();
  var y = oDate.getFullYear();
  var m = oDate.getMonth() + 1;
  var d = oDate.getDate();
  var time3 = oDate.toLocaleTimeString();
  // 补0
  // console.log(typeof m)
  m = toString(m).padStart(2, "0");
  d = toString(d).padStart(2, "0");
  if (st1) {
    var newData = {
      id: systemDate.length + 1,
      caption: st1,
      name: "admin",
      time: y + "-" + m + "-" + d + " " + time3,
    };
    systemDate.push(newData);
    systemRender();
    systemEditPage.style.display = "none";
  } else if (st2) {
    alert("消息标题不能为空");
  } else {
    alert("请输入内容");
  }
}
